<template>
  <div>
    <!-- 最多显示一行 -->
    <div class="van-ellipsis">
      这是一段最多显示一行的文字，多余的内容会被省略
    </div>

    <!-- 最多显示两行 -->
    <div class="van-multi-ellipsis--l2">
      这是一段最多显示两行的文字，多余的内容会被省略
    </div>
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <van-checkbox name="a">复选框 a</van-checkbox>
      <van-checkbox name="b">复选框 b</van-checkbox>
      <van-checkbox name="c">复选框 c</van-checkbox>
    </van-checkbox-group>

    <van-button type="primary" @click="checkAll">全选</van-button>
    <van-submit-bar button-text="全部清空" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [],
      token: "",
    };
  },
  methods: {
    //清空全部
    clear() {
      //首先在前端快速让list变成空数组
      this.List = [];
      //请求后端数据库清空列表
      this.$axios({
        method: "get",
        url: "/job/clear",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            console.log("清空成功");
          } else {
            console.log("清空失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },

    //单个item的删除
    dellike(index, e) {
      this.List.splice(index, 1); //'1' 获取item的前台索引值，从这个索引值开始删除，1代表删除一个
      //请求后端数据库删除item
      this.$axios({
        method: "get",
        url: "/job/remove",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
        params: {
          wid: e,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            console.log("删除成功");
          } else {
            console.log("删除失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },
    //页面初始化时获取收藏列表
    getList() {
      this.$axios({
        method: "get",
        url: "/job/list",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            //定义从后端获取的joblist
            var res = res.data.data;
            this.List = res;

            console.log("获取成功");
          } else {
            console.log("获取失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },
    //获取token
  },
  created() {
    this.token = localStorage.getItem("token");
  },
  mounted: function () {
    this.getList();
  },
};
</script>

<style lang="scss" scoped></style>
